<!-- Vue SFC -->
<template>
    <div id="app">
        <!-- <treeselect v-model="value" :multiple="true" :options="options" placeholder="请选择分类..." :flat="true"
             :default-expand-level="1" /> -->
             <tree-select v-model="value" width="500" :options="options" :default-expand-level="1" :disabled="true" placeholder="请选择分类..."></tree-select>

             <h1>{{value}}</h1>
    </div>
</template>

<script>
    // import the component
    // import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    // import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        // register the component
        components: {
            // Treeselect
        },
        data() {
            return {
                // define default value
                value: 'a',
                // define options
                options: [{
                    id: 'a',
                    label: 'a',
                    children: [{
                        id: 'aa',
                        label: 'aa',
                    }, {
                        id: 'ab',
                        label: 'ab',
                    }],
                }, {
                    id: 'b',
                    label: 'b',
                }, {
                    id: 'c',
                    label: 'c',
                }],
            }
        },
    }
</script>